
var scenarioList = [
    {
        id:1,
        title:'公共交通行业',
        summary: ['地铁站','火车站','高铁站','机场','高速服务区'],
        name: 'PUBLIC INDUSTRY',
        cover:'https://bym-website.gz.bcebos.com/assets/production-optometry/jiaotong_machine_img.png'
    }
    ,
    {
        id:2,
        title:'零售行业',
        summary: ['商场','超市','步行街','高端潮流品牌店','品牌服饰店'],
        name: 'RETAIL INDUSTRY',
        cover:'https://bym-website.gz.bcebos.com/assets/production-optometry/lingshou_machine_img.jpg'
    }

];


new Vue({
    data:{
        part1Show: false,
        part2Show: false,
        windowHeight: 0 //视窗高
    },

    methods:{
        //设置元素状态
        setActive: function( el, stateName ){

            if( el.getBoundingClientRect().top < this.windowHeight ){
                this[stateName] = true;
            }
            if( el.getBoundingClientRect().bottom < 0 || el.getBoundingClientRect().top > this.windowHeight ){
                this[stateName] = false;
            }
        },
        //设置视窗高度
        setWindowHeight:function(){
            this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        }
    },

    mounted:function(){
        var self = this;
        //初始化视窗高度
        self.setWindowHeight();
        window.onResize = debounce( function(){
            self.setWindowHeight();
        } ,200);

       window.onscroll = debounce(function(){
             self.setActive( self.$refs['part1'], "part1Show" );
            self.setActive( self.$refs['part2'], "part2Show" );
       }, 200);
    }
}).$mount('#configure');

